require('../css/commonCss/normalize.css')
require('../css/commonCss/basic.css')
require('../css/commonCss/property.css')
require('../css/commonCss/reset.css')
require('../liabs/iconfont/iconfont.css')
require('../css/commonCss/footer.less')
require('../css/course.less')

const { default: axios } = require('axios')
//导入util
const util = require('../util/util')

document.addEventListener('DOMContentLoaded', function () {
  //底部导航
  util.fixBottomNav('run')

  //顶部导航
  util.sportTopNav('course')


  axios.get('http://139.9.177.51:8099/sports/allcourse').then(function (res) {
    console.log(res.data.data)
    let data = res.data.data;

    let newCourse = data.filter(function (item) { //数组过滤出latest为1的最新课程
      return item.latest === 1;
    })
    let courseList = data.filter(function (item) { //数组过滤出latest为0的课程
      return item.latest === 0;
    })
    console.log(newCourse[0].imgurl)
    //最新课程的单渲染
    document.querySelector('#imgurl').src = 'http://139.9.177.51:8099' + newCourse[0].imgurl;
    document.querySelector('#name').textContent = newCourse[0].name;
    document.querySelector('#desc').textContent = newCourse[0].desc;
    //给最新课程添加自定义属性
    document.querySelector('#newCourse').dataset['cid'] = newCourse[0].courseId
    //普通课程的多渲染
    let arr = courseList.map(function (item) {
      return `
              <div class="coursebox"data-cid=${item.courseId}>
                <img src="http://139.9.177.51:8099${item.imgurl}" alt="">
                <div class="courselist-text">
                  <p class="title">${item.name}</p>
                  <p class="text">${item.desc}</p>
                </div>
              </div>
            `
    });

    
    document.querySelector('#courseList').innerHTML = arr.join('')
    console.log(arr.join())
  })

  //最新课程的点击事件,点击a页面跳转b页面(用自定义属性传参)
  document.querySelector('#newCourse').addEventListener('click', function () {
    //获取自定义属性cid
    let cid = this.dataset['cid'];
    console.log(cid)
    //将cid存储到会话存储
    sessionStorage.setItem('cid', cid)
    //跳转页面
    location.href = './courseDetails.html';
  })

  //普通课程的点击事件
  document.querySelector('#courseList').addEventListener('click', function (e) {
    //获取自定义属性
    let cid = e.target.closest('.coursebox').dataset['cid']
    //会话存储
    sessionStorage.setItem('cid', cid)
    //跳转页面
    location.href = './courseDetails.html'
  })
})